<template>
  <div class="shared-calendar">
    <van-calendar
      switch-mode="month"
      ref="calendarRef"
      color="#ff4350"
      title="共享日历"
      :poppable="false"
      :show-confirm="false"
      :formatter="formatter"
      :min-date="minDate"
      @select="selectTime"
      @panel-change="monthShow"
    />

    <div class="calendar-data">
      <van-tabs v-model:active="active" color="rgb(255, 67, 80)">
        <van-tab title="全部日程">
          <div
            v-for="(item, index) of planList"
            :key="index"
            class="calendar-item"
            @click="toEdit(item)"
          >
            <div class="item-content">
              <span class="visit-active">{{ item.visitorName }}</span>
              <span class="item-text"> 计划拜访 </span>
              <span class="visit-active">{{ item.customName }}</span>
            </div>
            <div class="date">{{ item.visitDate }}</div>
          </div>

          <van-empty
            description="暂无日程"
            v-if="!planList.length"
            image-size="6rem"
          />
        </van-tab>
        <van-tab title="我的日程">
          <div
            v-for="(item, index) of myData"
            :key="index"
            class="calendar-item"
            @click="toEdit(item)"
          >
            <div class="item-content">
              <span class="visit-active">{{ item.visitorName }}</span>
              <span class="item-text"> 计划拜访 </span>
              <span class="visit-active">{{ item.customName }}</span>
            </div>
            <div class="date">{{ item.visitDate }}</div>
          </div>
          <van-empty
            description="暂无日程"
            v-if="!myData.length"
            image-size="6rem"
          />
        </van-tab>
      </van-tabs>
    </div>

    <div class="add-btn" @click="addItem"></div>
  </div>
</template>

<script setup lang="ts" name="SharedCalendar">
import { computed, nextTick, ref, watch } from "vue";
import { getPlanByDate, getPlanListAll } from "./fetchData";
import dayjs from "dayjs";
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();
const calendarList = ref<Record<string, any>[]>([]);
const planList = computed(() => {
  const date = dayjs(calendarTime.value).format("YYYY-MM-DD");
  return calendarList.value.filter(
    item => date === dayjs(item.visitDate).format("YYYY-MM-DD")
  );
});
const minDate = new Date(1949, 0, 1);
const calendarRef = ref<any>();
const calendarTime = ref("");
const myData = ref<Record<string, any>[]>([]);
const active = ref(0);

const formatter = (day: any) => {
  const date = dayjs(day.date).format("YYYY-MM-DD");

  const index = calendarList.value.findIndex(
    (item: any) => item.visitDate.slice(0, 10) === date
  );
  day.bottomInfo = index !== -1 ? "●" : "";

  return day;
};

function selectTime(date: any) {
  active.value = 0;
  const time = dayjs(date).format("YYYY-MM-DD");
  calendarTime.value = time;
  getCalendar(time);
}

function addItem() {
  const date = calendarRef.value.getSelectedDate();
  router.push({
    name: "SharedCalendarEdit",
    query: { date: dayjs(date).format("YYYY-MM-DD HH:mm:ss") }
  });
}

function toEdit(item: any) {
  const date = calendarRef.value.getSelectedDate();
  router.push({
    name: "SharedCalendarEdit",
    query: { date: dayjs(date).format("YYYY-MM-DD HH:mm:ss"), id: item.id }
  });
}

function monthShow(date: { date: string }) {
  console.log(date);
  getCalendar(dayjs(date.date).format("YYYY-MM-DD"));
}

function getCalendar(date: string) {
  getPlanListAll(date).then((res: any) => {
    if (+res.code === 200) calendarList.value = res.data || [];
  });

  getPlanByDate(date).then((res: any) => {
    myData.value = res.data || [];
  });
}

watch(
  () => route.query,
  () => {
    nextTick(() => {
      const date = calendarRef.value.getSelectedDate();
      calendarTime.value = date;
      getCalendar(dayjs(date).format("YYYY-MM-DD"));
      // getData(dayjs(date).format("YYYY-MM-DD"));
    });
  },
  { immediate: true }
);
</script>

<style scoped lang="less">
.shared-calendar {
  position: relative;
  display: flex;
  flex-direction: column;

  .van-calendar {
    height: 23rem;
  }

  :deep(.van-calendar__header-title) {
    display: none;
  }

  :deep(.van-calendar__selected-day) {
    width: 2rem;
    height: 2rem;
    border-radius: 50% !important;
  }

  :deep(.van-calendar__bottom-info) {
    color: #fe6500;
  }

  .calendar-data {
    flex: 1;
    height: 0;
    padding: 1rem;
    overflow: auto;
    background-color: #f3f4fa;

    .calendar-item {
      margin-top: 0.6rem;
      padding: 0.6rem 1rem;
      background-color: #fff;
      border-radius: 0.5rem;

      .item-content {
        font-size: 1.1rem;

        .visit-active {
          color: #ff4350;
        }

        .item-text {
          margin: 0 0.1rem;
        }
      }

      .date {
        margin-top: 0.4rem;
        color: #bfbfbf;
      }
    }
  }

  .add-btn {
    position: absolute;
    right: 1rem;
    bottom: 5rem;
    width: 4.5rem;
    height: 4.5rem;
    background: url("./assets/add.png") no-repeat center;
    background-size: contain;
    z-index: 99999;
  }
}
</style>
